<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="themes/base.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.structure-1.4.5.min.css" />
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="/resources/util.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <title>中奖纪录管理</title>
    <style type="text/css">
        body{
            font-size: 13px;
            padding: 0px;
        }
        .history{
            font-size: 13px;
        }
        .record{
            padding: 10px;
            overflow: hidden;
            background-color: #fff;
            margin: 10px 0px;
        }
        .record>span{
            display: block;
            line-height: 20px;
        }
        .record>span:first-of-type{
            float: left;
        }
        .record>span:last-of-type{
            clear: both;
            width: 100%;
            text-align: center;
        }
        .zhuanpanLuckyTradeOpened a{
            color: #ccc;
        }
        #refresh{
            position: fixed;
            right: 10px;
            top: 10px;
        }
        #iframe{
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            display: none;
            border: none;
            z-index: 999;
        }
        #closeIframe{
            position: fixed;
            top: 0px;
            width: 100%;
            background-color: rgba(0,0,0,1);
            display: none;
            justify-content: flex-start;
            align-items: center;
            z-index: 1000;
            color: #fff;
            height: 65px;
        }
        #closeIframe img{
            width: 24px;
            height: 24px;
            margin: 10px;
        }
        .nodata{
            padding: 10px;
            text-align: center;
            display: none;
        }
    </style>
</head>

<body>
    <div id="closeIframe"><img src=""/>返回中奖纪录管理</div>
    <iframe id="iframe"></iframe>
    <img id="refresh" src=""/>
    <div class="history">
        
    </div>
    <div class="nodata">没有更多数据</div>
    <script type="text/javascript">
        var token = null;
        //防止token变更
        document.cookie.split(" ").join("").split(";").forEach(function(cookie){
            if(cookie.indexOf("token")==0){
                let hostname = window.location.hostname.substring(window.location.hostname.indexOf("."));
                token = cookie.split("=")[1];
                let fn = function(){
                    document.cookie = "token="+ escape (token) + ";domain="+hostname+";path=/";
                };
                document.addEventListener("mousedown",fn);
                document.addEventListener("touchstart",fn);
                document.addEventListener("click",fn);
            }
        });
        var apiHost = "https://"+window.location.hostname+"/plugin/api";
        let appId = util._param("app_id");
        function addRecord(record){
            let pic = $("<span><img src=\""+record.trade_pic+"?imageView2/5/w/100/h/100\"/></span>");
            let title = $("<span>"+record.trade_title+"</span>");
            let nick_name = $("<span>顾客："+record.nick_name+"</span>");
            let money = $("<span>价格："+util._money(record.lucky_money)+"</span>");
            let time = $("<span>时间："+util._date(record.time)+"</span>");
            let tid = $("<span>微信交易号："+record.transaction_id+"</span>");
            let detail = $("<span><a>订单详情</a></span>");
            if(record.zhuanpanLuckyTradeOpened){
                detail.addClass("zhuanpanLuckyTradeOpened");
            }
            detail.click(function(){
                window.localStorage.setItem("zhuanpan.lucky.trade.opened."+record.trade_id,"1");
                detail.addClass("zhuanpanLuckyTradeOpened");
                $("#iframe").show();
                window.localStorage.setItem("selected.appInfo.id",appId);
                $(document.body).css("overflow","hidden");
                $("#closeIframe").css("display","flex").click(function(){
                    $(this).css("display","none");
                    $("#iframe").hide();
                    $(document.body).css("overflow","auto");
                });
                $("#iframe").prop("src","https://"+window.location.hostname+"/trade-detail?id="+record.trade_id+"&hiddenToolbar=true").show();
//                wx.miniProgram.navigateTo({url:"/pages/index/index?scene="+encodeURIComponent("forward:https://"+window.location.hostname+"/trade-detail?id="+record.trade_id)});
/*                window.localStorage.setItem("selected.appInfo.id",appId);
                window.location.href = "/trade-detail?id="+record.trade_id;*/
            });
            $("<div></div>").addClass("record").append(pic).append(title).append(money).append(time).append(nick_name).append(tid).append(detail).appendTo($(".history"));
        }
        let start = 0;
        let end = 10;
        let isLoading = false;
        function loadMore(){
            if(isLoading){
                return;
            }
            $.mobile.loading( "show" );
            isLoading = true;
            $.get(apiHost+"/remote.call",{url:"https://service-p5l2zor3-1255950678.ap-shanghai.apigateway.myqcloud.com/release/all-winning-record?start="+start+"&end="+end+"&app_id="+appId+"&plugin_id=zhuanpan"},function(res){
                res.forEach(function(record){
                    let zhuanpanLuckyTradeOpened = window.localStorage.getItem("zhuanpan.lucky.trade.opened."+record.trade_id)=="1";
                    record.zhuanpanLuckyTradeOpened = zhuanpanLuckyTradeOpened;
                    addRecord(record);
                });
                if(res.length==0){
                    $(".nodata").show();
                }else{
                    start +=end+1;
                    end +=end;
                    $(".nodata").hide();
                }
            }).done(function(){
                 window.setTimeout(function(){
                     isLoading = false;
                 },1000);
                $.mobile.loading( "hide" );
            });
        }
        
        $(function(){
            $(window).scroll(function(){
                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                    loadMore();
                }
            });
            $("#refresh").click(function(){
                $(".history").html("");
                start = 0;
                end = 10;
                loadMore();
            });
        });
    </script>
</body>

</html>
